<template>
    <div>
        <span>房型名称</span>
        <input type="text" v-model="queryInfo.roomTypeName"/>
        <span>房间大小</span>
        <input type="text" v-model="queryInfo.max"/>
        <span>房间面积</span>
        <input type="text" v-model="queryInfo.min"/>
        <input type="button" @click="GetRoomTypeList" value="查询" class="btn btn-success" />
        <h2>房型列表显示</h2>
        <input type="button" @click="ok" value="添加房型" class="btn btn-primary" />
        <table class="table table-bordered">
                <tbody>
                    <tr>
                        <td>房型名称</td>
                        <td>门市价</td>
                        <td>房型面积</td>
                        <td>可住人数</td>
                        <td>是否可加床</td>
                        <td>房型照片</td>
                        <td>房型介绍</td>
                        <td>操作</td>
                    </tr>
                    <tr v-for="item in data.list" :key="item.id">
                        <td>{{item.roomTypeName}}</td>
                        <td>{{item.price}}</td>
                        <td>{{item.asay}}</td>
                        <td>{{item.count}}</td>
                        <td>
                            <span v-if="item.isBarty==1">不可加床</span>
                            <span v-if="item.isBarty==2">免费加床</span>
                            <span v-if="item.isBarty==3">收费加床</span>
                            <span v-if="item.isBarty==0">自定义</span>


                        </td>
                        <td>
                            <img :src="item.photo" width="60px" height="60px"/>
                        </td>
                        <td>{{item.roomDesc}}</td>
                        <td>操作</td>
                    </tr>
                </tbody>
            </table>
    </div>
    <div>
        <span>共<a style="color: red;">{{data.totalCount}}</a>条数据</span>
        <span>共<a style="color: red;">{{data.totalPage}}</a>页</span>
        <span>当前<a style="color: red;">{{queryInfo.Pageindex}}</a>/<a style="color: red;">{{queryInfo.PageSize}}</a>页</span>
       <input type="button" value="首页" @click="gopage('a')"/>
       <input type="button" value="上一页" @click="gopage('b')"/>
       <span v-for="item in data.totalPage" :key="item" @click="gopage(item)" >{{ item }}</span>
       <input type="button" value="下一页" @click="gopage('c')"/>
       <input type="button" value="尾页" @click="gopage('d')"/>

    </div>
</template>

<script setup lang="ts">
import {ref,reactive,onMounted} from 'vue'
import { useRoute,useRouter } from 'vue-router';
import axios from 'axios';
let route=useRoute();
let router=useRouter();
let ok=()=>{
    router.push("/RoomTypeAdd")
}
//房型展示
onMounted(()=>{
    GetRoomTypeList()
})
//获取房型
let data:any=reactive({
    list:[],
    totalCount:0,
    totalPage:0
})
let queryInfo=reactive({
    Pageindex:1,
    PageSize:2,
    roomTypeName:'',
    max:'',
    min:''
})
//获取房型列表
const GetRoomTypeList=()=>{
    axios({
        url:'/api/RoomType/GetRoomTypesList',
        method:'get',
        params:
            queryInfo
        
    })
    .then((res)=>{
        console.log(res);
        data.list=res.data.list;
        data.totalCount=res.data.totalCount;
        data.totalPage=res.data.totalPage;
    })
}
//分页
const gopage=(str:any)=>{
    switch(str){
        case 'a':
            if(queryInfo.Pageindex==1){
                alert('已经是第一页了');
                return;
            }
        queryInfo.Pageindex=1;
        break;
        case 'b':
        if(queryInfo.Pageindex==1){
                alert('没有上一页了');
                return;
            }
        queryInfo.Pageindex--;   
        break;
        case 'c':
        if(queryInfo.Pageindex==data.totalPage){
                alert('没有下一页了');
                return;
            }
            queryInfo.Pageindex++;   
            break;  
            case 'd':
                if(queryInfo.Pageindex=data.totalPage){
                    alert('没有下一页了');
                    return;
                }
            queryInfo.Pageindex=data.totalPage;
            break;  
            case str:
            queryInfo.Pageindex=str;
    }
    GetRoomTypeList();
}
</script>

<style scoped>
span{
    margin:0 10px;
}
input[type="button"]{
    margin:0 20px ;
}
</style>